<#define __SERVER__="{{LAM.SERVER}}" />
<#define __INDEX__="{{LAM.INDEX}}" />
#define# __DATA__ <#include repeat="0" tp-data="{}"  file="__SERVER__/shop/index" /> #end#
#define# __BILLID__ <#include repeat="0" tp-data="{}"  file="__SERVER__/goods/generateId" /> #end#

<#import path="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/js/bootstrap-datepicker.min.js" root="" write="1" befor="1" />
<#import type="css" path="
bootstrap-datepicker.min.css,
bootstrap-datepicker.standalone.min.css
" root="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/css/" befor="1" />

<#define _TITLE_="添加商品" />

<#extends title="_TITLE_" data="{'list':[
{'name':'商品','href':'###','title':''},
{'name':'店铺管理','href':'###','title':''},
{'name':'_TITLE_'}
]}" />

<#beginBlock id="crumb" data="{'list':[
{'name':'店铺管理','href':'###','title':''},
{'name':'店铺管理','href':'###','title':''},
{'name':'_TITLE_'}
]}">
<#endBlock>

<#Block:begin id="select" data="{'list':[]}">
<%LAM.each(list,function(i){%>
<option value="<%=this.id%>"><%=this.name%></option>
<%});%>
<#Block:end>
<#Block:begin id="input-text" data="{'name':'','label':'','warning':true,'value':'','input_style':'','input_class':''}">
<li class="L ml5">
    <label class="L"><%=label%>：<%if(warning){%><span class="warning">*</span><%}%></label>
    <input type="text" name="<%=name%>" style="width: 80px; <%=input_style%>" class="text name L ml5 <%=input_class%>" value="<%=value%>">
    <span data-error="<%=name%>" class="help-block none"></span>
</li>
<#Block:end>

<#Block:begin id="radio" data="{'index': 1}">
<input name="listId" type="radio" id="listId_<%=index%>" value="<%=index%>" /> <%=index%>
<#Block:end>
<#Block:begin id="goods" data="{'remove':true,'list':[], 'index': 1}">
<div class="sectionForm-A1 sectionForm-A1-1 sectionForm-A1-1-1 mb15">
    <ul class="clear mb5 row">
        <li class="L mr15"><%=System.Template.getBlock('radio', {'index': index})%></li>
        <#=block id="input-text" data="{'name':'name[]','label':'名称','input_style':'width:120px;'}" />
        <#=block id="input-text" data="{'name':'number[]','label':'数量','value':1,'input_style':'width:45px;', 'input_class': 'number'}" />
        <#=block id="input-text" data="{'name':'weight[]','label':'重量','value':1, 'input_class': 'weight'}" />
        <#=block id="input-text" data="{'name':'single_price[]','label':'单价','input_style':'width:45px;', 'input_class': 'single_price'}" />
        <#=block id="input-text" data="{'name':'final_price[]','label':'结算价格','input_style':'width:45px;', 'input_class': 'final_price'}" />
        <!--Del:begin-->
        <%if(remove){%>
        <li class="R sectionButton-B1">
            <button data-remove="goods" type="button" class="btn save L mr15">删除</button>
        </li>
        <%}%>
        <!--Del:end-->
    </ul>
</div>
<#Block:end>
<#Block:begin id="form">
<form class="form-horizontal" id="app" action="__SERVER__/goods/add" method="post">
    <div class="sectionWrap-A5">
        <div class="">
            <div class="sectionForm-A1 sectionForm-A1-1 sectionForm-A1-1-1" style="margin-bottom: 100px;">
                <ul class="clear">
                    <li class="L ml5 sectionButton-B1">
                        <label class="L">店铺：<span class="warning">*</span></label>
                        <select class="L ml10" name="shop_id" style="width:115px;">
                            <option value="0">请选择</option>
                            <#=block id="select" data="{'list':__DATA__.data}" />
                        </select>
                        <span data-error="shop_id" class="help-block none"></span>
                        <a href="__INDEX__shop/create" class="btn save L ml5">添加店铺</a>
                    </li>
                    <#=block id="input-text" data="{'name':'bill_id','label':'账单号','value':'__BILLID__','input_style':'width:120px;'}" />
                    <#=block id="input-text" data="{'name':'discount','label':'折扣价','value':0,'input_style':'width:30px;'}" />
                    <li class="L ml5">
                        <label class="L">创建日期：<span class="warning">*</span></label>
                        <input type="text" autocomplete="off" name="create_by" style="width: 80px" class="text name L ml5 datepicker" value="">
                        <span data-error="create_by" class="help-block none"></span>
                    </li>
                    <li class="R sectionButton-B1">
                        <button type="button" id="add_goods_agin" class="btn save L mr15">添加</button>
                        <button type="button" id="copy_goods_agin" class="btn save L mr15">复制</button>
                        <button type="button" id="del_goods" class="btn save L mr15">删除</button>
                    </li>
                </ul>

            </div>
            <div id="goods">
                <#=block id="goods" data="{'remove':false, 'index': 1}" />
            </div>
            <div class="row mb10">
                <div class="col-sm-1">
                    总金额: <span id="total">0.00</span>
                </div>
                <div class="col-sm-1"><a class="btn btn-default" id="checkout" href="javascript:void();">结算</a></div>
            </div>

            <div class="clear mb10 sectionForm-A1 sectionForm-A1-1-1 sectionForm-A2">
                <button type="submit" class="btn save L mr15">提交</button>
                <button type="reset" class="btn btn-cancel L">恢复</button>
            </div>
        </div>
    </div>
</form>
<#Block:end>
<#=block id="form" />
<script type="text/javascript">

    LAM.run([jQuery],function($) {
        'use strict';
        var System = this;


        var app = new Vue({
          el: '#app',
          delimiters: ['{#', '#}'],
          data: {
            message: 'Hello Vue!'
          }
        })


        function getElementByName(name) {
            return document.getElementsByName(name)[0].value;
        }
        function getElementsByName(name) {
            var arr = [];
            System.each(document.getElementsByName(name),function () {
                arr.push(this.value);
            });
            return arr;
        }

        $(function(){

            $('.datepicker').datepicker({
                autoclose: true,
                clearBtn: true,
                format: 'yyyy-mm-dd'
            });
            var $goods = $('#goods');
            var $dom = null;
            var index = 1;


            var $discount = $('[name="discount"]');
            var total = 0.00;
            $(document).on('click','#checkout',function() {
                $goods.find('.final_price').each(function () {
                    var val = parseFloat($(this).val());
                    total  += val;
                });
                var discount = parseFloat($discount.val());
                var val = parseFloat(total-discount).toFixed(2);
                
                $('#total').text("NaN" === val ? 0 : val);
                // $(this).remove();
                total = 0.00;

            });

            $(document).on('click','.final_price',function() {
                var $row = $(this).closest('.row');
                var price = $('.single_price',$row).val() * $('.number',$row).val() * $('.weight',$row).val();
                price = parseFloat(price).toFixed(2);
                $(this).val(price);
            });

            $('#add_goods_agin').on('click',function () {
                index++;
                $goods.append(System.Template.getBlock('goods', {'index': index}))
            });
            
            $('#copy_goods_agin').on('click',function () {
                if ($dom) {
                    index++;
                    var _$dom = $dom.clone(true);
                    _$dom.find('[name="listId"]').parent().html(System.Template.getBlock('radio', {'index': index}));
                    $goods.append(_$dom);
                    _$dom.find('[name="listId"]').attr('checked','checked')
                    $dom = _$dom;
                }
            });


            $(document).on('click','[name="listId"]',function () {
                $dom = $(this).closest('.sectionForm-A1');
            });

            $(document).on('click','#del_goods',function () {
                if ($dom && index > 1) {
                    $dom.remove();
                    $dom = null;
                }
            });

            $(document).on('click','[data-remove="goods"]',function () {
                // $(this).closest('.sectionForm-A1').remove();
            });



            
            $('form').submit(function () {
                $('[data-error]').hide();
                var shop_id = getElementByName("shop_id");
                var bill_id = getElementByName("bill_id");
                var discount = getElementByName("discount");
                var create_by = getElementByName("create_by");

                var names = getElementsByName("name[]");
                var numbers = getElementsByName("number[]");
                var weights = getElementsByName("weight[]");
                var single_prices = getElementsByName("single_price[]");
                var final_prices = getElementsByName("final_price[]");

                $[this.method](this.action,{
                    'shop_id':shop_id,
                    'bill_id':bill_id,
                    'discount':discount,
                    'create_by':create_by,
                    'name':names,
                    'number':numbers,
                    'weight':weights,
                    'single_price':single_prices,
                    'final_price':final_prices
                },function(data){
                    if(data.status){
                        alert(data.message);
                        System.redirect(System.INDEX+"goods/index");
                    }else{
                        alert(data.message);
                        System.each(data.errors,function (key,value) {
                            if(System.isString(value)) {
                                $('[data-error="'+key+'"]').text(value).show();
                            }else {
                                System.each(value,function (i) {
                                    $('[data-error="'+key+'[]"]').eq(i).text(this).show();
                                });
                            }

                        });
                    }
                },'json');

                return false;
            });



        });
    });
</script>

<style type="text/css">
    .sectionWrap-A5{width:auto;margin:0 auto;}
    .sectionForm-A1-1-1 label{width:66px;margin:0;}
    .sectionForm-A1-1 .text.name{width: 66px;}
</style>

